let nav = document.querySelector('nav')
let footer = document.querySelector("footer")
let ProductTypesSpan = document.querySelectorAll(".ProductTypes>span")
let suspension = document.querySelector(".suspension")
// console.log(nav)
//创建导航栏
nav.innerHTML = `
        <div class="nav-icon"><img
                src="./image/aHR0cDovLzVjYjAzODhmYTFiYWQudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC9lN2ZjN2QwNzFmMjIwYzdhZDg3NDYyYTZiZmFkZDc5NC05MC53ZWJw.webp"
                alt=""></div>
        <div class="nav-details">
            <div class="page">
                <span>首页</span>
                <span>所有商品</span>
                <span>关于我们</span>
                <span>服务支持</span>
                <span>联系我们</span>
            </div>
            <div class="icon-user">
                <svg t="1587872839016" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="24159" width="32" height="32">
                    <path
                        d="M512 512c-115.01037 0-208.592593-93.582222-208.592593-208.592593S396.98963 94.814815 512 94.814815s208.592593 93.582222 208.592593 208.592592-93.582222 208.592593-208.592593 208.592593z m0-379.259259c-94.094222 0-170.666667 76.572444-170.666667 170.666666s76.572444 170.666667 170.666667 170.666667c94.113185 0 170.666667-76.572444 170.666667-170.666667s-76.553481-170.666667-170.666667-170.666666z"
                        fill="#666666" p-id="24160"></path>
                    <path
                        d="M929.185185 929.185185a18.962963 18.962963 0 0 1-18.962963-18.962963c0-219.572148-178.650074-398.222222-398.222222-398.222222-3.299556 0-6.618074 0.037926-9.898667 0.113778a18.962963 18.962963 0 1 1-0.929185-37.906963c3.602963-0.094815 7.205926-0.132741 10.827852-0.132741 240.507259 0 436.148148 195.640889 436.148148 436.148148a18.962963 18.962963 0 0 1-18.962963 18.962963zM94.814815 929.185185a18.962963 18.962963 0 0 1-18.962963-18.962963 436.849778 436.849778 0 0 1 224.142222-381.25037 18.962963 18.962963 0 1 1 18.450963 33.109333A398.980741 398.980741 0 0 0 113.777778 910.222222a18.962963 18.962963 0 0 1-18.962963 18.962963z"
                        fill="#666666" p-id="24161"></path>
                    <path
                        d="M929.185185 929.185185H94.814815a18.962963 18.962963 0 1 1 0-37.925926h834.37037a18.962963 18.962963 0 1 1 0 37.925926z"
                        fill="#666666" p-id="24162"></path>
                </svg>
                <svg t="1587870132391" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="16721" width="32" height="32">
                    <path
                        d="M235.097 699.133c12.288 36.45 51.285 64.49 89.676 64.49h555.656l5.22-18.165 123.439-429.613c12.3-42.813-15.9-80.631-60.036-80.631H424.585c-13.793 0-24.975 11.265-24.975 25.162 0 13.897 11.182 25.162 24.975 25.162h524.467c10.872 0 15.11 5.682 12.054 16.314L837.668 731.465l23.99-18.166H324.774c-17.03 0-36.983-14.347-42.378-30.35L73.6 63.566c-4.436-13.158-18.62-20.203-31.68-15.734-13.061 4.47-20.054 18.76-15.618 31.918l208.795 619.383zM399.61 902.017c0-55.587-44.728-100.65-99.903-100.65-55.174 0-99.902 45.063-99.902 100.65s44.728 100.65 99.902 100.65c55.175 0 99.903-45.063 99.903-100.65z m-149.854 0c0-27.794 22.364-50.325 49.951-50.325 27.588 0 49.952 22.531 49.952 50.325 0 27.794-22.364 50.325-49.952 50.325-27.587 0-49.95-22.531-49.95-50.325zM924.098 902.017c0-55.587-44.728-100.65-99.903-100.65-55.174 0-99.902 45.063-99.902 100.65s44.728 100.65 99.902 100.65c55.175 0 99.903-45.063 99.903-100.65z m-149.854 0c0-27.794 22.364-50.325 49.951-50.325s49.951 22.531 49.951 50.325c0 27.794-22.364 50.325-49.95 50.325-27.588 0-49.952-22.531-49.952-50.325z"
                        p-id="16722"></path>
                </svg>
            </div>
        </div>`
//创建尾部
footer.innerHTML +=`
<div class="TheTailTip">
            Copyright  © 2019  工艺品商城模板  All rights reserved. 本网站为演示模板，商品不可购买
        </div>`
//创建悬浮栏
suspension.innerHTML =`
<div class="change"><img src="./image/电话.png" alt=""></div>
<div class="change"><img src="./image/QQQ.png" alt=""></div>
<div class="change"><img src="./image/警报.png" alt=""></div>
<div><img src="./image/回到顶部.png" alt=""></div>`
//创建悬浮栏点击事件
let suspensionDiv = suspension.querySelectorAll("div")
for(let i in suspensionDiv){
    suspensionDiv[i].onclick = function(){
       if(i == 3){
        var time = setInterval(function () {
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            if (top === 0) {
                clearInterval(time);
            } else {
                document.documentElement.scrollTop = top - 20;
            }
        }, 1);
       }
    }
}
//设置导航栏的点击事件
let pageSpan = document.querySelectorAll(".page>span")
for(let i in pageSpan){
    pageSpan[i].onclick = function(){
        if(i==0){
            pageJumps("index.html")
        }
        else if(i == 1){
            pageJumps("homeone.html")
        }
        else if(i == 2){
            pageJumps("AboutUs.html")
        }
        else if(i == 3){
            pageJumps("serviceSupport.html")
        }
        else if(i == 4){
            pageJumps("contactUs.html")
        }
    }
}
//封装点击跳转的函数
function pageJumps(url){
    location.href = url
}